import React from "react";
import User from "../entity/user";
import { Button, TextField } from "@mui/material";
import { makeStyles } from '@mui/styles';
import { go } from "../util";
import { Toast } from "antd-mobile";

const loginStyles = makeStyles({
    loginPage: {
        textAlign: "center",

        display: "flex",
        flexDirection: "column",

        width: 250,
        position: "absolute",
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)'
    },
    width: {
        // width: 250
        marginTop: 20
    },
    bCenter: {
        textAlign: "center",
        position: "absolute",
        bottom: 0,
        left: '50%',
        transform: 'translate(-50%, 0)',
        color: 'gray'
    }
});

export default function Register(props) {
    function toRegister(e) {
        // const user = new User('17132307428', 'kiven171', '王力', 'kiven')
        // sessionStorage.setItem(infoKey, JSON.stringify(user))
        Toast.show('目前不支持注册新用户')
    }
    const pageStyle = loginStyles(props)

    return (
        <div>
            <form noValidate autoComplete="off"
                className={pageStyle.loginPage}
                target='_self'
                onSubmit={toRegister}>
                <TextField id="outlined-basic"
                    className={pageStyle.width}
                    label="账号"
                    variant="outlined" />
                <TextField id="outlined-basic"
                    className={pageStyle.width}
                    style={{ marginTop: 20 }}
                    error={true}
                    label="密码"
                    variant="outlined"
                    helperText='长度6~15'
                    type='password' />
                <TextField id="outlined-basic"
                    className={pageStyle.width}
                    style={{ marginTop: 20 }}
                    error={true}
                    label="密码"
                    variant="outlined"
                    helperText='长度6~15'
                    type='password' />

                <Button
                    variant="contained"
                    className={pageStyle.width}
                    style={{ marginTop: 20 }}
                    color="primary"
                    type='submit'>
                    注册
                </Button>

                <Button
                    className={pageStyle.width}
                    style={{ marginTop: 20 }}
                    onClick={(e) => go('/login')}
                    color="primary">已有账号，去登录</Button>
            </form>

            <a className={pageStyle.bCenter} href='https://beian.miit.gov.cn'>蜀ICP备20004876号-1</a>
        </div>
    )
}